<template>
  <div class="medical-orders">
    <h1>医疗订单</h1>

    <el-card class="orders-list">
      <template #header>
        <div class="card-header">
          <span>我的医疗订单</span>
        </div>
      </template>

      <el-table :data="medicalOrders" style="width: 100%">
        <el-table-column prop="order_id" label="订单号" width="180" />
        <el-table-column prop="hospital_name" label="医院" width="180" />
        <el-table-column prop="doctor_name" label="医生" width="120" />
        <el-table-column prop="appointment_time" label="预约时间" width="180" />
        <el-table-column prop="amount" label="费用" width="100">
          <template #default="{ row }">
            ¥{{ row.amount }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getOrderStatusType(row.status)">
              {{ getOrderStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="{ row }">
            <el-button
              v-if="row.status === 'pending_payment'"
              type="primary"
              link
              @click="handleSettle(row)"
            >
              结算
            </el-button>
            <el-button
              v-else-if="row.status === 'completed'"
              type="success"
              link
              disabled
            >
              已结算
            </el-button>
            <el-button
              type="info"
              link
              @click="viewOrderDetails(row)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 结算对话框 -->
    <el-dialog
      v-model="settleDialogVisible"
      title="结算订单"
      width="400px"
    >
      <p>您即将结算订单：<strong>{{ selectedOrder?.order_id }}</strong></p>
      <p>总金额：<strong>¥{{ selectedOrder?.amount }}</strong></p>
      <el-form :model="settleForm" label-width="80px" style="margin-top: 20px;">
        <el-form-item label="支付方式">
          <el-radio-group v-model="settleForm.payment_type">
            <el-radio label="credit">信用支付</el-radio>
            <el-radio label="normal">普通支付</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="settleDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSettle">确认结算</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
// 导入API方法 (待实现)
// import { getMedicalOrders, settleMedicalOrder } from '@/api/medical'

const medicalOrders = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const settleDialogVisible = ref(false)
const selectedOrder = ref(null)
const settleForm = ref({
  payment_type: 'normal'
})

// 模拟数据加载
const loadMedicalOrders = async () => {
  // 实际项目中会调用API
  medicalOrders.value = [
    { id: 1, order_id: 'MD2024001', hospital_name: '市第一人民医院', doctor_name: '张医生', appointment_time: '2024-06-15 10:00', amount: 120.00, status: 'pending_payment' },
    { id: 2, order_id: 'MD2024002', hospital_name: '市第三附属医院', doctor_name: '李医生', appointment_time: '2024-06-10 14:30', amount: 80.00, status: 'completed' },
    { id: 3, order_id: 'MD2024003', hospital_name: '市中心医院', doctor_name: '王医生', appointment_time: '2024-06-08 09:00', amount: 200.00, status: 'pending_payment' },
  ]
  total.value = medicalOrders.value.length
}

const getOrderStatusType = (status) => {
  if (status === 'completed') return 'success'
  if (status === 'pending_payment') return 'warning'
  return 'info'
}

const getOrderStatusText = (status) => {
  if (status === 'completed') return '已结算'
  if (status === 'pending_payment') return '待结算'
  return '未知'
}

const handleSettle = (order) => {
  selectedOrder.value = order
  settleDialogVisible.value = true
}

const confirmSettle = async () => {
  // 实际项目中会调用API进行结算
  try {
    // const res = await settleMedicalOrder(selectedOrder.value.id, settleForm.value.payment_type);
    // if (res.code === 200) {
      ElMessage.success('订单结算成功！')
      settleDialogVisible.value = false
      // 刷新订单列表
      loadMedicalOrders()
    // } else {
    //   ElMessage.error('订单结算失败：' + res.message)
    // }
  } catch (error) {
    ElMessage.error('订单结算失败')
  }
}

const viewOrderDetails = (order) => {
  ElMessage.info(`查看订单 ${order.order_id} 详情 (功能待完善)`)
  // 实际项目中可以跳转到订单详情页
}

const handleSizeChange = (val) => {
  pageSize.value = val
  loadMedicalOrders()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  loadMedicalOrders()
}

onMounted(() => {
  loadMedicalOrders()
})
</script>

<style scoped>
.medical-orders {
  padding: 20px;
  background-color: #f0f2f5;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.orders-list, .pagination {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.fee {
  font-size: 1.2em;
  font-weight: bold;
  color: #f56c6c;
}
</style> 